<template>
  <div class="ToExamine">
    <van-list
      v-model="dataList[active].loading"
      :finished="dataList[active].finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-tabs v-model="active" sticky color="#D2AE62">
        <van-tab title="商家">
          <div v-if="show">
            <ul v-if="dataList[0].list.length > 0">
              <li
                class="ToExamine_item"
                v-for="(item, index) in dataList[0].list"
                :key="index"
              >
                <van-row @click="getMerchant(item.mid)">
                  <van-col span="6">
                    <img :src="$base.baseImg + item.logo" />
                  </van-col>
                  <van-col span="18">
                    <div class="ToExamine_item_name">
                      <h3>
                        {{ item.mName }}
                      </h3>
                      <p>{{ item.desc }}</p>
                      <p>
                        <span>{{ $common.getExactTime(item.createTime) }}</span>
                      </p>
                    </div>
                  </van-col>
                </van-row>
              </li>
            </ul>
            <van-empty v-else />
          </div>
        </van-tab>
        <van-tab title="商品">
          <div v-if="show1">
            <ul v-if="dataList[1].list.length > 0">
              <li
                class="ToExamine_item"
                v-for="(item, index) in dataList[1].list"
                :key="index"
              >
                <van-row @click="getProducts(item.sku)">
                  <van-col span="6">
                    <img :src="$base.baseImg + item.img[0]" />
                  </van-col>
                  <van-col span="18">
                    <div class="ToExamine_item_name">
                      <h3>
                        {{ item.proName }}
                      </h3>
                      <p>{{ item.content }}</p>
                      <p>
                        <span>{{ $common.getExactTime(item.createTime) }}</span>
                      </p>
                    </div>
                  </van-col>
                </van-row>
              </li>
            </ul>
            <van-empty v-else />
          </div>
        </van-tab>
      </van-tabs>
    </van-list>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Tab, Tabs, List, Col, Row, Empty } from "vant";
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Col);
Vue.use(Row);
Vue.use(Empty);
window.onload = function () {
  var isPageHide = false;
  window.addEventListener("pageshow", function () {
    if (isPageHide) {
      window.location.reload();
    }
  });
  window.addEventListener("pagehide", function () {
    isPageHide = true;
  });
};
@Component({})
export default class ToExamine extends Vue {
  private active: number = 0;
  private show: boolean = false;
  private show1: boolean = false;
  public dataList = [
    {
      form: {
        page: 1,
        size: 20,
        status: 0,
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        online: -1,
        status: 0,
      },
      loading: false,
      finished: false,
      list: [],
    },
  ];

  private onLoad(): void {
    if (this.active == 0) {
      this.$common.getAuthToken(this.merchantList);
    } else {
      this.$common.getAuthToken(this.proList);
    }
  }
  // 获取商户列表
  private merchantList(): void {
    this.$post(`merchantList`, this.dataList[this.active].form).then(
      (res: any) => {
        if (res.code == 0) {
          this.dataList[0].loading = false;
          this.dataList[0].list = this.dataList[0].list.concat(res.data.list);
          this.dataList[0].form.page += 1;
          this.show = true;
          if (res.data.list < 20) {
            this.dataList[0].finished = true;
          }
        }
      }
    );
  }

  private proList() {
    this.$post(`proList`, this.dataList[this.active].form).then((res: any) => {
      if (res.code == 0) {
        this.dataList[this.active].loading = false;
        this.dataList[this.active].list = this.dataList[
          this.active
        ].list.concat(res.data.list);
        this.dataList[this.active].form.page += 1;
        this.show1 = true;
        if (res.data.list < 20) {
          this.dataList[this.active].finished = true;
        }
      }
    });
  }
  // 跳转商家详情
  private getMerchant(e: number): void {
    this.$router.push(`/auditDetails/${e}`);
  }
  // 跳转商品详情
  private getProducts(e: number): void {
    this.$router.push(`/auditProducts/${e}`);
  }
}
</script>

<style lang="scss" scoped>
.ToExamine {
  ul {
    list-style: none;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    .ToExamine_item {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 20px;
      border-radius: 10px;
      img {
        width: 100%;
        height: 110px;
        display: block;
        border-radius: 10px;
      }
      .ToExamine_item_name {
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;
        & > h3 {
          font-size: 30px;
          font-weight: 400;
          color: #000000;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        & > p {
          font-size: 24px;
          font-weight: 300;
          color: #e9c790;
          line-height: 1.5;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span {
            float: right;
            color: #343434;
          }
        }
      }
    }
  }
}
</style>
